<template>
  <div>
    <el-row :gutter="18">
      <!--部门数据-->
      <el-col :span="24" :xs="24">
        <div class="head-container">
          <el-card class="box-card" shadow="never"
                   body-style="width:100%;height:550px;overflow:auto">
            <el-tree :props="defaultProps"
                     :expand-on-click-node="false"
                     :data="treeOptions"
                     style="height:100%"
                     ref="tree" highlight-current @node-click="handleNodeClick">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span v-if="`${editable}` == 'true'">
                  <i class="el-icon-plus" @click="handleAdd(data)" v-hasPermi="['sa:common-tree-biz:create']"></i>
                  <i v-if="data.typeId == 'biz' && (!data.children || data.children.length == 0)" class="el-icon-delete"
                     v-hasPermi="['sa:common-tree-biz:delete']"
                     @click="handleDelete(data)"></i>
                </span>
              </span>
            </el-tree>
          </el-card>
        </div>
      </el-col>
    </el-row>

    <!-- 对话框(添加 / 修改) -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" v-dialogDrag append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="父节点" prop="parentName">
              <el-input v-model="form.parentName" placeholder="父节点" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型编号" prop="kindId">
              <el-input v-model="form.kindId" placeholder="请输入类型编号" :disabled="!!form.kindId"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="编码" prop="code">
              <el-input v-model="form.code" placeholder="请输入编码"/>
            </el-form-item>
          </el-col>
          <!--          <el-col :span="8">
                      <el-form-item label="简码" prop="shortCode">
                        <el-input v-model="form.shortCode" placeholder="请输入简码"/>
                      </el-form-item>
                    </el-col>-->
          <!--          <el-col :span="8">
                      <el-form-item label="节点类型" prop="nodeKindId">
                        <el-input v-model="form.nodeKindId" placeholder="请选择节点类型"/>
                      </el-form-item>
                    </el-col>-->
          <el-col :span="12">
            <el-form-item label="名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" placeholder="请输入备注"/>
            </el-form-item>
          </el-col>
          <!--          <el-col :span="8">
                      <el-form-item label="父节点ID" prop="parentId">
                        <el-input v-model="form.parentId" placeholder="请输入父节点ID"/>
                      </el-form-item>
                    </el-col>-->
          <el-col :span="12">
            <el-form-item label="排序号" prop="sequence">
              <el-input v-model="form.sequence" placeholder="请输入排序号"/>
            </el-form-item>
          </el-col>
          <!--          <el-col :span="8">
                      <el-form-item label="版本号" prop="version">
                        <el-input v-model="form.version" placeholder="请输入版本号"/>
                      </el-form-item>
                    </el-col>-->
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
                          :key="dict.value" :label="parseInt(dict.value)">{{ dict.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {COMMON_TREE, CommonStatusEnum, OrgKindEnum, YesOrNo} from "@/utils/constants";
import {
  getCommonTreeList,
  createCommonTreeBiz,
  updateCommonTreeBiz,
  deleteCommonTreeBiz
} from "@/api/sa/commonTreeBiz";
import {deleteCommonTree} from "@/api/sa/commonTree";

export default {
  name: "SaCommonTreeBiz",
  components: {},
  props: {
    kindId: {
      type: Number
    },
    nodeKindId: {
      type: String
    },
    editable: {
      type: Boolean,
      default: true,
    }
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 弹出层标题
      title: "",
      open: false,
      defaultProps: {
        children: "children",
        label: "name"
      },
      currentCommonTree: {},
      treeOptions: [],
      form: {
        status: CommonStatusEnum.ENABLE
      },
      rules: {
        name: [
          {required: true, message: "名称不能为空", trigger: "blur"}
        ],
        code: [
          {required: true, message: "编码不能为空", trigger: "blur"}
        ]
      }
    };
  },
  created() {
    this.getTreeList()
  },

  methods: {
    handleNodeClick(data) {
      this.currentCommonTree = data
      this.$emit("node-click", data);
    },
    async getTreeList() {
      let queryParams = {kindId: this.kindId}
      if (!!this.nodeKindId) {
        queryParams.nodeKindId = this.nodeKindId
      }
      getCommonTreeList(queryParams).then(response => {
        this.treeOptions = []
        let root = {id: COMMON_TREE.ROOT.id}
        let data = response.data ? response.data : []
        data.push(root)
        if (this.$listeners['tree-loaded']) {
          this.$emit('tree-loaded', data, treeNodeList => {
            data = this.handleTree(treeNodeList, "id", undefined, undefined, root.id)
            this.treeOptions.push(...data);
          })
        } else {
          data = this.handleTree(data, "id", undefined, undefined, root.id)
          this.treeOptions.push(...data);
        }


      });
    },
    handleAdd(data) {
      this.form.parentId = data.id
      this.form.parentName = data.name
      this.form.kindId = data.kindId
      if (!!this.nodeKindId) {
        this.form.nodeKindId = this.nodeKindId
      }
      this.open = true;
      this.title = "添加节点";
    },
    handleDelete(data) {
      const id = data.id;
      const name = data.name;
      if (this.$listeners['node-delete']) {
        this.$emit('node-delete', data, ok => {
          if (ok) {
            this.$modal.confirm('是否确认删除 名称为"' + name + '"的数据项?').then(function () {
              return deleteCommonTreeBiz(id);
            }).then(() => {
              this.getTreeList();
              this.$modal.msgSuccess("删除成功");
            }).catch(() => {
            });
          }
        }, cancel => {

        })
      } else {
        this.$modal.confirm('是否确认删除 名称为"' + name + '"的数据项?').then(function () {
          return deleteCommonTreeBiz(id);
        }).then(() => {
          this.getTreeList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {
        });
      }

      return false
    },

    submitForm() {
      this.$refs["form"].validate(valid => {
        if (!valid) {
          return;
        }
        // 修改的提交
        if (this.form.id != null) {
          updateCommonTreeBiz(this.form).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.open = false;
            this.getTreeList();
          });
          return;
        }
        // 添加的提交
        createCommonTreeBiz(this.form).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.open = false;
          this.getTreeList();
        });
      });
    },
    cancel() {
      this.open = false
    }

  }
};
</script>


<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
